<html>
<meta charset="utf-8">

<head>
    <script src="jquery-3.2.1.min.js"></script>
    <style>
        .dv_center {
            margin: auto;
            width: 400px;
            height: 200px;
            border: 1px dotted blue;
        }

        .text_center {
            width: 400px;
            height: 200px;
            vertical-align: middle;
            border: 1px solid red;
        }

        .dv_right {
            position: absolute;
            border: 3px solid yellowgreen;
            width: 400px;
            height: 200px;
            right: 0;
        }
        .dv_floatright{
            float: right;
            border: 3px solid yellowgreen;
            width: 400px;
            height: 200px;
            margin-right: 20px;
        }
        .dv_paddingcenter{
            padding: 50px 0;
            border: 3px solid saddlebrown;
            width: 400px;
        }
    </style>
</head>
<div>
    <div class="dv_center">
        margin:auto
        元素居中对齐

    </div>
    <br>
    <div class="text_center">
        text-align:center<br>
        文字居中对齐
    </div>
    <div class="dv_right">
       使用绝对定位 右对齐
       position:absolute
    </div>
    <p style="clear:both">___</p>
    <div class="dv_floatright">
        float:right
        使用浮动定位
    </div>
    <div class="dv_paddingcenter">
        使用padding居中文字
    </div>
</div>

</html>